<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Elevate - 高端生活管理助手</title>
    <link rel="stylesheet" href="mobile-styles.css">
    <link href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@100;200;300;400;500;600;700;800;900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body>
    <div class="mobile-app">
        <!-- 高端状态栏 -->
        <div class="premium-status-bar">
            <div class="status-left">
                <div class="premium-time">9:41</div>
                <div class="premium-date">周三</div>
            </div>
            <div class="status-center">
                <div class="brand-logo">
                    <div class="logo-icon">E</div>
                </div>
            </div>
            <div class="status-right">
                <div class="premium-icons">
                    <div class="signal-bars">
                        <span></span><span></span><span></span><span></span>
                    </div>
                    <i class="fas fa-wifi premium-icon"></i>
                    <div class="battery-indicator">
                        <div class="battery-fill"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 背景装饰 -->
        <div class="app-background">
            <div class="bg-gradient-primary"></div>
            <div class="bg-particles">
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
            </div>
            <div class="bg-mesh">
                <div class="mesh-gradient"></div>
            </div>
        </div>

        <!-- 主内容区域 -->
        <main class="luxury-content">
            <!-- 高端首页 -->
            <div id="home-page" class="premium-page active">
                <!-- 奢华顶部问候 -->
                <header class="luxury-header">
                    <div class="premium-greeting">
                        <div class="greeting-container">
                            <h1 class="luxury-title">
                                <span class="title-main">早上好</span>
                                <span class="title-accent">张三</span>
                            </h1>
                            <p class="luxury-subtitle">今天将是充满可能的一天</p>
                        </div>
                    </div>
                    <div class="premium-avatar-section">
                        <div class="avatar-container">
                            <div class="avatar-ring"></div>
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=120&h=120&fit=crop&crop=face" alt="头像" class="premium-avatar">
                            <div class="status-indicator">
                                <div class="pulse"></div>
                            </div>
                        </div>
                    </div>
                </header>

                <!-- 奢华每日灵感卡片 -->
                <div class="luxury-inspiration-card">
                    <div class="card-glow"></div>
                    <div class="card-surface">
                        <div class="inspiration-header">
                            <div class="inspiration-icon">
                                <div class="icon-glow"></div>
                                <i class="fas fa-sparkles"></i>
                            </div>
                            <div class="inspiration-meta">
                                <span class="card-label">每日灵感</span>
                                <div class="premium-date-display">8月28日</div>
                            </div>
                            <button class="luxury-refresh-btn" id="refresh-quote">
                                <div class="btn-surface"></div>
                                <i class="fas fa-arrow-rotate-right"></i>
                            </button>
                        </div>
                        <div class="inspiration-content">
                            <blockquote id="daily-quote" class="luxury-quote">
                                每一个伟大的梦想都始于一个敢于追求的人。今天，让我们继续前行。
                            </blockquote>
                            <div class="quote-signature">
                                — 致更好的自己
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 精英习惯追踪 -->
                <section class="luxury-habits-section">
                    <div class="premium-section-header">
                        <div class="section-title-container">
                            <div class="section-icon">
                                <i class="fas fa-trophy"></i>
                            </div>
                            <h3 class="section-title">今日习惯</h3>
                        </div>
                        <button class="premium-add-btn">
                            <div class="btn-glow"></div>
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    
                    <div class="luxury-habits-grid">
                        <div class="premium-habit-card completed">
                            <div class="card-backdrop"></div>
                            <div class="habit-surface">
                                <div class="habit-checkbox-luxury">
                                    <input type="checkbox" id="habit1" checked>
                                    <label for="habit1" class="luxury-checkbox">
                                        <div class="checkbox-glow"></div>
                                        <i class="fas fa-check"></i>
                                    </label>
                                </div>
                                <div class="habit-details">
                                    <h4 class="habit-title">晨练俯卧撑</h4>
                                    <div class="habit-meta">
                                        <span class="time-badge">06:30</span>
                                        <span class="status-badge completed">已完成</span>
                                    </div>
                                </div>
                                <div class="habit-streak-luxury">
                                    <div class="streak-visual">
                                        <div class="streak-number">7</div>
                                        <div class="streak-icon">
                                            <i class="fas fa-fire"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="premium-habit-card">
                            <div class="card-backdrop"></div>
                            <div class="habit-surface">
                                <div class="habit-checkbox-luxury">
                                    <input type="checkbox" id="habit2">
                                    <label for="habit2" class="luxury-checkbox">
                                        <div class="checkbox-glow"></div>
                                        <i class="fas fa-check"></i>
                                    </label>
                                </div>
                                <div class="habit-details">
                                    <h4 class="habit-title">深度阅读</h4>
                                    <div class="habit-meta">
                                        <span class="time-badge">21:00</span>
                                        <span class="status-badge pending">待完成</span>
                                    </div>
                                </div>
                                <div class="habit-streak-luxury">
                                    <div class="streak-visual">
                                        <div class="streak-number">12</div>
                                        <div class="streak-icon">
                                            <i class="fas fa-fire"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="premium-habit-card">
                            <div class="card-backdrop"></div>
                            <div class="habit-surface">
                                <div class="habit-checkbox-luxury">
                                    <input type="checkbox" id="habit3">
                                    <label for="habit3" class="luxury-checkbox">
                                        <div class="checkbox-glow"></div>
                                        <i class="fas fa-check"></i>
                                    </label>
                                </div>
                                <div class="habit-details">
                                    <h4 class="habit-title">创意写作</h4>
                                    <div class="habit-meta">
                                        <span class="time-badge">22:30</span>
                                        <span class="status-badge pending">待完成</span>
                                    </div>
                                </div>
                                <div class="habit-streak-luxury">
                                    <div class="streak-visual">
                                        <div class="streak-number">3</div>
                                        <div class="streak-icon">
                                            <i class="fas fa-fire"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 高级目标规划 -->
                <section class="luxury-goals-section">
                    <div class="premium-section-header">
                        <div class="section-title-container">
                            <div class="section-icon">
                                <i class="fas fa-rocket"></i>
                            </div>
                            <h3 class="section-title">未来规划</h3>
                        </div>
                        <button class="premium-add-btn">
                            <div class="btn-glow"></div>
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    
                    <div class="luxury-goals-container">
                        <div class="premium-goal-card">
                            <div class="goal-backdrop"></div>
                            <div class="goal-surface">
                                <div class="goal-icon-luxury">
                                    <div class="icon-backdrop"></div>
                                    <i class="fas fa-language"></i>
                                </div>
                                <div class="goal-content-luxury">
                                    <div class="goal-header-luxury">
                                        <h4 class="goal-title">日语精通</h4>
                                        <div class="goal-deadline-premium">12月完成</div>
                                    </div>
                                    <p class="goal-description">掌握高级对话和书面表达</p>
                                    <div class="goal-progress-luxury">
                                        <div class="progress-track">
                                            <div class="progress-fill-luxury" style="--progress: 35%"></div>
                                            <div class="progress-glow"></div>
                                        </div>
                                        <div class="progress-text-luxury">35%</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="premium-goal-card">
                            <div class="goal-backdrop"></div>
                            <div class="goal-surface">
                                <div class="goal-icon-luxury">
                                    <div class="icon-backdrop"></div>
                                    <i class="fas fa-code"></i>
                                </div>
                                <div class="goal-content-luxury">
                                    <div class="goal-header-luxury">
                                        <h4 class="goal-title">全栈项目</h4>
                                        <div class="goal-deadline-premium">10月完成</div>
                                    </div>
                                    <p class="goal-description">构建个人品牌作品集</p>
                                    <div class="goal-progress-luxury">
                                        <div class="progress-track">
                                            <div class="progress-fill-luxury" style="--progress: 68%"></div>
                                            <div class="progress-glow"></div>
                                        </div>
                                        <div class="progress-text-luxury">68%</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="premium-goal-card">
                            <div class="goal-backdrop"></div>
                            <div class="goal-surface">
                                <div class="goal-icon-luxury">
                                    <div class="icon-backdrop"></div>
                                    <i class="fas fa-running"></i>
                                </div>
                                <div class="goal-content-luxury">
                                    <div class="goal-header-luxury">
                                        <h4 class="goal-title">马拉松挑战</h4>
                                        <div class="goal-deadline-premium">2025年3月</div>
                                    </div>
                                    <p class="goal-description">突破极限，完成全程挑战</p>
                                    <div class="goal-progress-luxury">
                                        <div class="progress-track">
                                            <div class="progress-fill-luxury" style="--progress: 22%"></div>
                                            <div class="progress-glow"></div>
                                        </div>
                                        <div class="progress-text-luxury">22%</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 智能统计面板 -->
                <section class="luxury-stats-section">
                    <div class="premium-section-header">
                        <div class="section-title-container">
                            <div class="section-icon">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <h3 class="section-title">今日数据</h3>
                        </div>
                    </div>
                    
                    <div class="luxury-stats-grid">
                        <div class="premium-stat-card">
                            <div class="stat-backdrop"></div>
                            <div class="stat-content">
                                <div class="stat-icon">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                                <div class="stat-value">1/3</div>
                                <div class="stat-label">已完成习惯</div>
                            </div>
                        </div>
                        <div class="premium-stat-card">
                            <div class="stat-backdrop"></div>
                            <div class="stat-content">
                                <div class="stat-icon">
                                    <i class="fas fa-fire"></i>
                                </div>
                                <div class="stat-value">12</div>
                                <div class="stat-label">最长连击</div>
                            </div>
                        </div>
                        <div class="premium-stat-card">
                            <div class="stat-backdrop"></div>
                            <div class="stat-content">
                                <div class="stat-icon">
                                    <i class="fas fa-trophy"></i>
                                </div>
                                <div class="stat-value">42%</div>
                                <div class="stat-label">总体进度</div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <!-- 高级项目管理页面 -->
            <div id="projects-page" class="premium-page">
                <header class="luxury-header">
                    <div class="premium-greeting">
                        <div class="greeting-container">
                            <h1 class="luxury-title">
                                <span class="title-main">项目管理</span>
                            </h1>
                            <p class="luxury-subtitle">精准掌控任务进度</p>
                        </div>
                    </div>
                    <button class="premium-header-btn">
                        <div class="btn-glow"></div>
                        <i class="fas fa-plus"></i>
                    </button>
                </header>

                <!-- 高级筛选标签 -->
                <div class="luxury-filter-tabs">
                    <button class="luxury-filter-tab active">
                        <span>全部</span>
                        <div class="tab-glow"></div>
                    </button>
                    <button class="luxury-filter-tab">
                        <span>进行中</span>
                        <div class="tab-glow"></div>
                    </button>
                    <button class="luxury-filter-tab">
                        <span>已完成</span>
                        <div class="tab-glow"></div>
                    </button>
                    <button class="luxury-filter-tab">
                        <span>计划中</span>
                        <div class="tab-glow"></div>
                    </button>
                </div>

                <!-- 精英软件项目 -->
                <section class="luxury-projects-section">
                    <div class="premium-section-header">
                        <div class="section-title-container">
                            <div class="section-icon">
                                <i class="fas fa-laptop-code"></i>
                            </div>
                            <h3 class="section-title">软件项目</h3>
                        </div>
                    </div>
                    
                    <div class="luxury-project-list">
                        <div class="premium-project-card">
                            <div class="project-backdrop"></div>
                            <div class="project-surface">
                                <div class="project-header-luxury">
                                    <div class="project-info-luxury">
                                        <h4 class="project-title">生活管理精英版</h4>
                                        <div class="project-tags-luxury">
                                            <span class="luxury-tag frontend">前端</span>
                                            <span class="luxury-tag javascript">JS</span>
                                        </div>
                                    </div>
                                    <div class="project-status-luxury in-progress">进行中</div>
                                </div>
                                <p class="project-desc-luxury">全新高端生活管理平台</p>
                                <div class="project-footer-luxury">
                                    <div class="project-progress-luxury">
                                        <div class="progress-track">
                                            <div class="progress-fill-luxury" style="--progress: 75%"></div>
                                        </div>
                                        <span class="progress-percentage">75%</span>
                                    </div>
                                    <button class="project-more-btn">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="premium-project-card">
                            <div class="project-backdrop"></div>
                            <div class="project-surface">
                                <div class="project-header-luxury">
                                    <div class="project-info-luxury">
                                        <h4 class="project-title">精品电商重构</h4>
                                        <div class="project-tags-luxury">
                                            <span class="luxury-tag react">React</span>
                                            <span class="luxury-tag typescript">TS</span>
                                        </div>
                                    </div>
                                    <div class="project-status-luxury completed">已完成</div>
                                </div>
                                <p class="project-desc-luxury">高性能现代化电商体验</p>
                                <div class="project-footer-luxury">
                                    <div class="project-progress-luxury">
                                        <div class="progress-track">
                                            <div class="progress-fill-luxury completed" style="--progress: 100%"></div>
                                        </div>
                                        <span class="progress-percentage">100%</span>
                                    </div>
                                    <button class="project-more-btn">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 智能周期任务 -->
                <section class="luxury-cycles-section">
                    <div class="premium-section-header">
                        <div class="section-title-container">
                            <div class="section-icon">
                                <i class="fas fa-sync-alt"></i>
                            </div>
                            <h3 class="section-title">周期任务</h3>
                        </div>
                    </div>
                    
                    <div class="luxury-cycle-list">
                        <div class="premium-cycle-card">
                            <div class="cycle-backdrop"></div>
                            <div class="cycle-surface">
                                <div class="cycle-info-luxury">
                                    <div class="cycle-header-luxury">
                                        <h4 class="cycle-title">技术博客更新</h4>
                                        <span class="cycle-frequency-luxury weekly">每周</span>
                                    </div>
                                    <p class="cycle-description">分享前沿技术见解</p>
                                    <div class="cycle-next-luxury">下次：周日 20:00</div>
                                </div>
                                <button class="luxury-cycle-btn completed">
                                    <div class="btn-glow"></div>
                                    <i class="fas fa-check"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="premium-cycle-card">
                            <div class="cycle-backdrop"></div>
                            <div class="cycle-surface">
                                <div class="cycle-info-luxury">
                                    <div class="cycle-header-luxury">
                                        <h4 class="cycle-title">代码审查</h4>
                                        <span class="cycle-frequency-luxury daily">每日</span>
                                    </div>
                                    <p class="cycle-description">团队代码质量保证</p>
                                    <div class="cycle-next-luxury urgent">下次：明天 09:00</div>
                                </div>
                                <button class="luxury-cycle-btn pending">
                                    <div class="btn-glow"></div>
                                    <i class="fas fa-play"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <!-- 奢华个人中心 -->
            <div id="profile-page" class="premium-page">
                <header class="luxury-profile-header">
                    <div class="profile-backdrop">
                        <div class="backdrop-gradient"></div>
                        <div class="backdrop-pattern">
                            <div class="pattern-dot"></div>
                            <div class="pattern-dot"></div>
                            <div class="pattern-dot"></div>
                        </div>
                    </div>
                    <div class="profile-content-luxury">
                        <div class="premium-avatar-section">
                            <div class="avatar-luxury-container">
                                <div class="avatar-ring-outer"></div>
                                <div class="avatar-ring-inner"></div>
                                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=face" alt="头像" class="avatar-luxury">
                                <button class="avatar-edit-luxury">
                                    <div class="btn-surface"></div>
                                    <i class="fas fa-camera"></i>
                                </button>
                            </div>
                        </div>
                        <div class="profile-info-luxury">
                            <h2 class="profile-name">张三</h2>
                            <p class="profile-title">全栈开发工程师</p>
                            <div class="profile-badges-luxury">
                                <span class="luxury-badge vip">
                                    <i class="fas fa-crown"></i>
                                    VIP用户
                                </span>
                                <span class="luxury-badge certified">
                                    <i class="fas fa-certificate"></i>
                                    认证开发者
                                </span>
                            </div>
                        </div>
                    </div>
                </header>

                <!-- 高级统计卡片 -->
                <div class="luxury-profile-stats">
                    <div class="premium-stat-card-profile">
                        <div class="stat-backdrop"></div>
                        <div class="stat-content">
                            <div class="stat-icon-large">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="stat-value-large">127</div>
                            <div class="stat-label-large">完成习惯</div>
                        </div>
                    </div>
                    <div class="premium-stat-card-profile">
                        <div class="stat-backdrop"></div>
                        <div class="stat-content">
                            <div class="stat-icon-large">
                                <i class="fas fa-project-diagram"></i>
                            </div>
                            <div class="stat-value-large">8</div>
                            <div class="stat-label-large">活跃项目</div>
                        </div>
                    </div>
                    <div class="premium-stat-card-profile">
                        <div class="stat-backdrop"></div>
                        <div class="stat-content">
                            <div class="stat-icon-large">
                                <i class="fas fa-fire"></i>
                            </div>
                            <div class="stat-value-large">45</div>
                            <div class="stat-label-large">连续天数</div>
                        </div>
                    </div>
                    <div class="premium-stat-card-profile">
                        <div class="stat-backdrop"></div>
                        <div class="stat-content">
                            <div class="stat-icon-large">
                                <i class="fas fa-trophy"></i>
                            </div>
                            <div class="stat-value-large">92%</div>
                            <div class="stat-label-large">完成率</div>
                        </div>
                    </div>
                </div>

                <!-- 智能设置面板 -->
                <section class="luxury-settings-section">
                    <div class="premium-section-header">
                        <div class="section-title-container">
                            <div class="section-icon">
                                <i class="fas fa-sliders-h"></i>
                            </div>
                            <h3 class="section-title">个人设置</h3>
                        </div>
                    </div>
                    
                    <div class="luxury-setting-list">
                        <div class="premium-setting-card">
                            <div class="setting-backdrop"></div>
                            <div class="setting-surface">
                                <div class="setting-icon-luxury">
                                    <div class="icon-backdrop"></div>
                                    <i class="fas fa-bell"></i>
                                </div>
                                <div class="setting-info-luxury">
                                    <h4 class="setting-title">智能提醒</h4>
                                    <p class="setting-description">个性化习惯提醒推送</p>
                                </div>
                                <label class="luxury-toggle-switch">
                                    <input type="checkbox" checked>
                                    <span class="toggle-slider-luxury">
                                        <span class="toggle-handle"></span>
                                    </span>
                                </label>
                            </div>
                        </div>
                        
                        <div class="premium-setting-card">
                            <div class="setting-backdrop"></div>
                            <div class="setting-surface">
                                <div class="setting-icon-luxury">
                                    <div class="icon-backdrop"></div>
                                    <i class="fas fa-moon"></i>
                                </div>
                                <div class="setting-info-luxury">
                                    <h4 class="setting-title">深色主题</h4>
                                    <p class="setting-description">护眼模式，降低蓝光伤害</p>
                                </div>
                                <label class="luxury-toggle-switch">
                                    <input type="checkbox">
                                    <span class="toggle-slider-luxury">
                                        <span class="toggle-handle"></span>
                                    </span>
                                </label>
                            </div>
                        </div>
                        
                        <div class="premium-setting-card">
                            <div class="setting-backdrop"></div>
                            <div class="setting-surface">
                                <div class="setting-icon-luxury">
                                    <div class="icon-backdrop"></div>
                                    <i class="fas fa-cloud-upload-alt"></i>
                                </div>
                                <div class="setting-info-luxury">
                                    <h4 class="setting-title">云端同步</h4>
                                    <p class="setting-description">多设备数据实时同步</p>
                                </div>
                                <label class="luxury-toggle-switch">
                                    <input type="checkbox" checked>
                                    <span class="toggle-slider-luxury">
                                        <span class="toggle-handle"></span>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 精英成就系统 -->
                <section class="luxury-achievements-section">
                    <div class="premium-section-header">
                        <div class="section-title-container">
                            <div class="section-icon">
                                <i class="fas fa-trophy"></i>
                            </div>
                            <h3 class="section-title">成就徽章</h3>
                        </div>
                    </div>
                    
                    <div class="luxury-achievement-grid">
                        <div class="premium-achievement-card earned">
                            <div class="achievement-backdrop"></div>
                            <div class="achievement-surface">
                                <div class="achievement-icon-luxury">
                                    <div class="icon-glow"></div>
                                    <i class="fas fa-fire"></i>
                                </div>
                                <h4 class="achievement-title">火焰守护者</h4>
                                <p class="achievement-description">连续30天保持习惯</p>
                                <div class="achievement-badge">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="premium-achievement-card earned">
                            <div class="achievement-backdrop"></div>
                            <div class="achievement-surface">
                                <div class="achievement-icon-luxury">
                                    <div class="icon-glow"></div>
                                    <i class="fas fa-rocket"></i>
                                </div>
                                <h4 class="achievement-title">项目启动者</h4>
                                <p class="achievement-description">成功创建首个项目</p>
                                <div class="achievement-badge">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="premium-achievement-card locked">
                            <div class="achievement-backdrop"></div>
                            <div class="achievement-surface">
                                <div class="achievement-icon-luxury">
                                    <div class="icon-glow"></div>
                                    <i class="fas fa-crown"></i>
                                </div>
                                <h4 class="achievement-title">习惯大师</h4>
                                <p class="achievement-description">进度 45/100天</p>
                                <div class="achievement-progress">
                                    <div class="progress-circle">
                                        <div class="progress-value">45%</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="premium-achievement-card locked">
                            <div class="achievement-backdrop"></div>
                            <div class="achievement-surface">
                                <div class="achievement-icon-luxury">
                                    <div class="icon-glow"></div>
                                    <i class="fas fa-star"></i>
                                </div>
                                <h4 class="achievement-title">目标达成者</h4>
                                <p class="achievement-description">进度 3/10个目标</p>
                                <div class="achievement-progress">
                                    <div class="progress-circle">
                                        <div class="progress-value">30%</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </main>

        <!-- 奢华底部导航 -->
        <nav class="luxury-bottom-nav">
            <div class="nav-backdrop">
                <div class="backdrop-blur"></div>
            </div>
            <div class="nav-container">
                <button class="luxury-nav-tab active" data-page="home">
                    <div class="tab-surface">
                        <div class="tab-glow"></div>
                        <div class="tab-icon">
                            <i class="fas fa-home"></i>
                        </div>
                        <span class="tab-label">首页</span>
                    </div>
                </button>
                <button class="luxury-nav-tab" data-page="projects">
                    <div class="tab-surface">
                        <div class="tab-glow"></div>
                        <div class="tab-icon">
                            <i class="fas fa-briefcase"></i>
                        </div>
                        <span class="tab-label">项目</span>
                    </div>
                </button>
                <button class="luxury-nav-tab" data-page="profile">
                    <div class="tab-surface">
                        <div class="tab-glow"></div>
                        <div class="tab-icon">
                            <i class="fas fa-user-circle"></i>
                        </div>
                        <span class="tab-label">我的</span>
                    </div>
                </button>
            </div>
        </nav>
    </div>

    <script src="mobile-script.js"></script>
</body>
</html>